<!DOCTYPE html>
<!-- saved from url=(0049)http://www.marcellop.com/bootmetro/demo/hub.html# -->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">

   <title>BootMetro Demo - Hub</title>

   <meta name="robots" content="noindex, nofollow">
   <meta name="description" content="BootMetro : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface.">
   <meta name="keywords" content="bootmetro, modern ui, modern-ui, metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html">
   <meta name="author" content="AozoraLabs by Marcello Palmitessa">
   <link rel="publisher" href="https://plus.google.com/117689250782136016574">

   <!-- remove or comment this line if you want to use the local fonts -->
   <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">

   <link rel="stylesheet" type="text/css" href="./assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="./assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="./assets/css/bootmetro-icons.css">
   <link rel="stylesheet" type="text/css" href="./assets/css/bootmetro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="./assets/css/datepicker.css">

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="./assets/css/demo.css">
	<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 45%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
   <!-- Le fav and touch icons 
   <link rel="shortcut icon" href="http://www.marcellop.com/bootmetro/assets/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="http://www.marcellop.com/bootmetro/assets/ico/apple-touch-icon-57-precomposed.png">-->	
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ 
   <script type="text/javascript" async src="http://www.google-analytics.com/ga.js"></script>-->
   <script src="./assets/js/modernizr-2.6.2.min.js"></script>
	<script type="text/javascript">
	//弹出隐藏层
	function ShowDiv(show_div,bg_div){
	document.getElementById(show_div).style.display='block';
	document.getElementById(bg_div).style.display='block' ;
	var bgdiv = document.getElementById(bg_div);
	bgdiv.style.width = document.body.scrollWidth;
	// bgdiv.style.height = $(document).height();
	$("#"+bg_div).height($(document).height());
	};
	//关闭弹出层
	function CloseDiv(show_div,bg_div)
	{
	document.getElementById(show_div).style.display='none';
	document.getElementById(bg_div).style.display='none';
	};
	</script>
 <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
   <script>window.jQuery || document.write("<script src='assets/js/jquery-1.10.0.min.js'>\x3C/script>")</script>
   <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3182578-6']);
      _gaq.push(['_trackPageview']);
      (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
   </script>
<style id="holderjs-style" type="text/css">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style><style type="text/css">#lb_infobar_8936321763{color:#000000 !important;font-weight:normal !important;text-decoration:none !important;margin-top:0 !important;margin-bottom:0 !important;margin-left:0 !important;margin-right:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;float:none !important;text-align:left !important;height:37px !important;width:100% !important;background-color:#F5F5F5 !important;background-image:-webkit-linear-gradient(top,#F5F5F5,#EEEDED) !important;border-bottom:1px solid #C0C0C0 !important;box-shadow:inset 0 1px 1px 1px #FFFFFF !important;line-height:36px !important;font-family:'微软雅黑','宋体' !important;z-index:9999999999 !important;margin:0 !important;padding:0 !important;position:fixed !important;top:0px !important;left:0px !important;}#lb_infobar_8936321763,#lb_infobar_8936321763 *{border-radius:0 !important;padding:0 !important;margin:0 !important;}#lb_infobar_8936321763 *{width:auto !important;background:none !important;}#lb_infobar_8936321763 input{border-radius:4px !important;box-shadow:0 1px 2px rgba(0,0,0,.15) !important;font-family:'微软雅黑,','宋体' !important;font-size:12px !important;font-weight:normal !important;text-shadow:none !important;margin:0 0 0 18px !important;padding:0 !important;}#lb_infobar_translate_8936321763{background-color:#FBB016 !important;background-image:-webkit-linear-gradient(top,#FBB016,#ED8A0D) !important;width:78px !important;height:26px !important;border:1px solid #E19D3C !important;color:#FFFFFF !important;cursor:pointer !important;line-height:normal !important;vertical-align:middle !important;}#lb_infobar_translate_8936321763:hover{background-color:#FDBF3F !important;background-image:-webkit-linear-gradient(top,#FDBF3F,#ED8A0D) !important;}#lb_infobar_translate_8936321763:active{background-color:#ED8A0D !important;background-image:-webkit-linear-gradient(top,#ED8A0D,#FBB016) !important;}#lb_infobar_words_8936321763{background-color:#FBB016 !important;background-image:-webkit-linear-gradient(top,#FBB016,#ED8A0D) !important;width:90px !important;height:26px !important;border:1px solid #E19D3C !important;color:#FFFFFF !important;cursor:pointer !important;line-height:normal !important;vertical-align:middle !important;left:360px !important;}#lb_infobar_words_8936321763:hover{background-color:#FDBF3F !important;background-image:-webkit-linear-gradient(top,#FDBF3F,#ED8A0D) !important;}#lb_infobar_words_8936321763:active{background-color:#ED8A0D !important;background-image:-webkit-linear-gradient(top,#ED8A0D,#FBB016) !important;}#lb_infobar_return_8936321763{background-color:#FFFFFF !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#E0DFDF) !important;width:78px !important;height:26px !important;border:1px solid #B0AFAF !important;color:rgba(0,0,0,.5) !important;cursor:pointer !important;line-height:normal !important;vertical-align:middle !important;}#lb_infobar_return_8936321763.lb_infobar_return_words_8936321763{width:130px !important;}#lb_infobar_return_8936321763:hover{background-color:#EDECEC !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#EDECEC) !important;}#lb_infobar_return_8936321763:active{background-color:#E0DFDF !important;background-image:-webkit-linear-gradient(top,#E0DFDF,#FFFFFF) !important;}#lb_infobar_8936321763 a{text-decoration:underline !important;font-size:12px !important;color:#999999 !important;cursor:pointer !important;}#lb_infobar_8936321763 a:hover{color:#FC9500 !important;}#lb_infobar_8936321763 a:active{color:#D68003 !important;}#lb_infobar_close_8936321763{background-position:-66px -27px !important;cursor:pointer !important;position:absolute !important;top:0 !important;right:1em !important;line-height:36px !important;}#lb_infobar_close_8936321763:hover{background-position:-66px -41px !important;}#lb_infobar_close_8936321763:active{background-position:-66px -54px !important;}#lb_infobar_notice_8936321763{line-height:36px !important;margin-left:55px !important;font-size:14px !important;vertical-align:middle !important;}#lb_infobar_powered_8936321763{padding-left:18px !important;font-size:10px !important;color:#979797 !important;font-family:'Arial' !important;font-style:italic !important;}#lb_infobar_ignore_8936321763{line-height:36px !important;margin-right:3em !important;position:absolute !important;top:0 !important;right:0 !important;}#lb_infobar_manual_8936321763{line-height:36px !important;margin-right:12em !important;position:absolute !important;top:0 !important;right:0 !important;}#lb_infobar_icon_8936321763{position:absolute !important;top:0 !important;left:0 !important;height:37px !important;width:42px !important;color:#fff !important;font-size:24px !important;text-align:center !important;background-repeat:no-repeat !important;background-position:-80px 0 !important;}#lb_infobar_translate_8936321763.lb_infobar_btn_inactive_8936321763,#lb_infobar_words_8936321763.lb_infobar_btn_inactive_8936321763{background-color:#FFFFFF !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#E0DFDF) !important;border:1px solid #B0AFAF !important;color:#808080 !important;}#lb_infobar_translate_8936321763.lb_infobar_btn_inactive_8936321763:hover,#lb_infobar_words_8936321763.lb_infobar_btn_inactive_8936321763:hover{background-color:#EDECEC !important;background-image:-webkit-linear-gradient(top,#FFFFFF,#EDECEC) !important;}#lb_infobar_translate_8936321763.lb_infobar_btn_inactive_8936321763:hover,#lb_infobar_words_8936321763.lb_infobar_btn_inactive_8936321763:active{background-color:#E0DFDF !important;background-image:-webkit-linear-gradient(top,#E0DFDF,#FFFFFF) !important;}#lb_infobar_hover_8936321763:before{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-top:5px solid #000 !important;bottom: -10px !important;left: 50% !important;}#lb_infobar_hover_8936321763:after{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-top:5px solid #fff !important;bottom: -9px !important;left: 50% !important;}#lb_infobar_hover_8936321763{line-height:1.2 !important;font-size:12px !important;min-width:150px !important;position:fixed !important;background:#fff !important;border:1px solid #333 !important;border-radius:3px !important;padding:10px !important;color:#333 !important;z-index:9999999999 !important;}#lb_infobar_hover_8936321763.lb_infobar_hover_below:before{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-bottom:5px solid #000 !important;top:-10px !important;left:50% !important;bottom:auto !important;}#lb_infobar_hover_8936321763.lb_infobar_hover_below:after{content:" " !important;position:absolute !important;border:5px solid transparent !important;border-bottom:5px solid #fff !important;top: -9px !important;left: 50% !important;bottom:auto !important;}</style></head>

<body class="panorama-parallax">
   <!--[if lt IE 7]>
   <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
   <![endif]-->

   <div id="wrap">
   
      <!-- Header
      ================================================== -->
      <div id="nav-bar" class="">
         <div class="pull-left">
            <div id="header-container">
               <h5>BootMetro Demo</h5>
			   <!--菜单列表-->
               <div class="dropdown">
                  <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                     Wikipedia Featured
                     <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                  <li><a href="http://www.marcellop.com/bootmetro/demo/metro-layouts.html">Metro Layouts</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/hub.html">Hub</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/tiles-templates.html">Tile Templates</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/listviews.html">ListViews</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/appbar-demo.html">App-Bar Demo</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/table.html">Table Demo</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/wizard.html">Wizard</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/icons.html">Icons</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/toast.html">Toast Notifications</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/pivot.html">Pivot</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/metro-components.html">Metro Components</a></li>
                  <li class="divider"></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/scaffolding.html">Bootstrap Scaffolding</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/base-css.html">Bootstrap Base CSS</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/components.html">Bootstrap Components</a></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/javascript.html">Bootstrap Javascript</a></li>
                  <li class="divider"></li>
                  <li><a href="http://www.marcellop.com/bootmetro/demo/index.html">Home</a></li>
               </ul>
              </div>
			  
            </div>
         </div>
         <div class="pull-right">
            <div id="top-info" class="pull-right">
            <a id="settings" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" class="win-command pull-right">
               <span class="win-commandicon win-commandring icon-cog-3"></span>
            </a>
            <a id="logged-user" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" class="win-command pull-right">
               <span class="win-commandicon win-commandring icon-user"></span>
            </a>
            <div class="pull-left">
               <h3>FirstName</h3>
               <h4>LastName</h4>
            </div>
         </div>
      </div>
      </div>
   
      <div id="alerts-container">
         <div id="toast-example1" class="toast toasttext02 fade in">
            <button type="button" class="close" data-dismiss="alert"></button>
            <div class="pull-left">
               <div class="toast-object icon-info-4"></div>
            </div>
            <div class="toast-body">
               <h4 class="toast-heading">Alpha version!</h4>
               <p>Please be patience, this demo is still a work in progress! Thanks.</p>
            </div>
         </div>
      </div>
   
      <!--<div id="metro-container" class="-container">-->
         <!--<div class="row">-->
            <!--<div id="hub" class="metro">-->
               <div class="metro panorama" style="height: 854px;">
                  <div class="panorama-sections" style="width: 2390px; height: 952px; margin-left: -561px;">
   
                     <div class="panorama-section">
   
                        <h2>Featured pictures</h2>
   
                        <!--<a class="tile widepeek" href="#">-->
                           <!--<div class="tile wide image">-->
                              <!--<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Darvasa_gas_crater_panorama.jpg/640px-Darvasa_gas_crater_panorama.jpg" alt=""/>-->
                           <!--</div>-->
                           <!--<div class="tile wide text bg-color-orange">-->
                              <!--<div class="text5">The Door to Hell, a burning natural gas field in Derweze, Turkmenistan</div>-->
                           <!--</div>-->
                        <!--</a>-->
   
                        <div class="tile-column-span-2">
                           <a class="tile wide imagetext wideimage bg-color-blue" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                              <img src="./assets/img/640px-Darvasa_gas_crater_panorama.jpg" alt="">
                              <div class="textover-wrapper bg-color-blueDark">
                                 <div class="text2">The Door to Hell, a burning natural gas field in Derweze, Turkmenistan</div>
                              </div>
                           </a>
   
                           <a class="tile wide imagetext wideimage bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                              <img src="./assets/img/320px-Lady_Elliot_Island_SVII.jpg" alt="">
                              <div class="textover-wrapper transparent">
                                 <div class="text2">An image of the coral reef near Lady Elliot Island</div>
                              </div>
                           </a>
   
                           <a class="tile square image bg-color-red" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                              <img src="./assets/img/611px-Wulfenite_mexique.jpg" alt="">
                              <div class="textover-wrapper transparent">
                                 <div class="text2">Wulfenite </div>
                              </div>
                           </a>
   
                           <a class="tile square image" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                              <img src="./assets/img/640px-Hagia_Sophia_Mars_2013.jpg" alt="">
                              <div class="textover-wrapper transparent">
                                 <div class="text2">Hagia Sophia</div>
                              </div>
                           </a>
   
                        </div>
   
                        <div class="tile-column-span-1">
                           <a class="tile squarepeek bg-color-orange" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                              <img src="./assets/img/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg" alt="">
                              <div class="text-inner">
                                 <div class="text4">The Asian Openbill or Asian Openbill Stork (Anastomus oscitans) is a large wading bird in the stork family Ciconiidae.</div>
                              </div>
                           </a>
   
                        </div>
   
                     </div>
   
                     <div class="panorama-section">
   
                        <h2>Featured articles</h2>
   
                        <div class="tile-column-span-2">
                           <a class="tile widepeek" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                              <div class="tile wide image">
                                 <img src="./assets/img/640px-Fuso_Trial_Heading_Left.jpg" alt="">
                              </div>
                              <div class="tile wide text">
                                 <div class="text-header">Fusō</div>
                                 <div class="text4">Japanese battleship Fusō (扶桑, a classical name for Japan) was the lead ship of the two Fusō-class dreadnought battleships built for the Imperial Japanese Navy.</div>
                              </div>
                           </a>
   
                           <a class="tile wide imagetext wideimage bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                              <img src="./assets/img/Famous_Fantastic_Mysteries_August_1942_cover.jpg" alt="">
                              <div class="textover-wrapper transparent">
                                 <div class="text2">Famous Fantastic Mysteries</div>
                              </div>
                           </a>
   
                        </div>
   
   
                     </div>
   
   
                     <div class="panorama-section tile-span-4">
   
                        <h2>Featured apps</h2>
   
                        <a class="tile app bg-color-orange" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                           <div class="image-wrapper">
                              <span class="icon icon-mail"></span>
                           </div>
                           <div class="app-label">Mail</div>
                           <div class="app-count">12</div>
                        </a>
   
                        <a class="tile app bg-color-blue" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                           <div class="image-wrapper">
                              <span class="icon icon-map"></span>
                           </div>
                           <div class="app-label">Map</div>
                        </a>
   
                        <a class="tile wide imagetext bg-color-greenDark" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                           <div class="image-wrapper">
                              <span class="icon icon-chat-2"></span>
                           </div>
                           <div class="column-text">
                              <div class="text4">Chat with your friends</div>
                           </div>
                           <div class="app-label">145 friends online</div>
                        </a>
   
                        <a class="tile app bg-color-purple" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                           <div class="image-wrapper">
                              <span class="icon icon-weather"></span>
                           </div>
                           <div class="app-label">Weather</div>
                        </a>
   
                        <a class="tile app bg-color-green" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html">
                           <div class="image-wrapper">
                              <span class="icon icon-linkedin"></span>
                           </div>
                           <div class="app-label">LinkedIn</div>
                        </a>
   
                     </div>
					<!--弹出层时背景层DIV-->
				<div id="fade" class="black_overlay">
				</div>
				<div id="MyDiv" class="white_content">
					<div style="text-align: right; cursor: default; height: 40px;">
						<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
					</div>
					<video src="http://localhost:8080/attendance-system/styles/video/test.mp4"  width="100%" height="80%" controls="controls">
					</video>
				</div>

                     <div class="panorama-section tile-span-4">
   
                        <h2>Group two</h2>
   
                        <a class="tile wide imagetext bg-color-blue" onclick="ShowDiv('MyDiv','fade')">
                           <div class="image-wrapper">
                              <span class="icon icon-music-3"></span>
                           </div>
                           <div class="column-text">
                              <div class="text">Top 10</div>
                              <div class="text">Favorites</div>
                              <div class="text">Best choices</div>
                           </div>
                           <span class="app-label">MUSIC</span>
                        </a>
                       </div>
                   </div>
               </div>
               <a id="panorama-scroll-prev" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" style="display: block;"></a>
               <a id="panorama-scroll-next" href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html"></a>
               <div id="panorama-scroll-prev-bkg"></div>
               <div id="panorama-scroll-next-bkg"></div>
            <!--</div>-->
         <!--</div>-->
      <!--</div>-->
   
   </div>
   <div id="charms" class="win-ui-dark slide">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="file:///C|/Users/Administrator/Downloads/BootMetro Demo - Hub_files/BootMetro Demo - Hub.html" class="close-charms win-backbutton"></a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
               <form class="">
                  <label for="win-theme-select">Change theme:</label>
                  <select id="win-theme-select" class="">
                     <option value="metro-ui-light">Light</option>
                     <option value="metro-ui-dark">Dark</option>
                  </select>
               </form>
   
            </div>
         </div>
      </div>
   
   </div>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
   <script>window.jQuery || document.write("<script src='assets/js/jquery-1.10.0.min.js'>\x3C/script>")</script>

   <!--[if IE 7]>
   <script type="text/javascript" src="scripts/bootmetro-icons-ie7.js">
   <![endif]-->

   <script type="text/javascript" src="./assets/js/min/bootstrap.min.js"></script>
   <script type="text/javascript" src="./assets/js/bootmetro-panorama.js"></script>
   <script type="text/javascript" src="./assets/js/bootmetro-pivot.js"></script>
   <script type="text/javascript" src="./assets/js/bootmetro-charms.js"></script>
   <script type="text/javascript" src="./assets/js/bootstrap-datepicker.js"></script>

   <script type="text/javascript" src="./assets/js/jquery.mousewheel.min.js"></script>
   <script type="text/javascript" src="./assets/js/jquery.touchSwipe.min.js"></script>

   <script type="text/javascript" src="./assets/js/holder.js"></script>
   <!--<script type="text/javascript" src="../assets/js/perfect-scrollbar.with-mousewheel.min.js"></script>-->
   <script type="text/javascript" src="./assets/js/demo.js"></script>


   <script type="text/javascript">

      $('.panorama').panorama({
         //nicescroll: false,
         showscrollbuttons: true,
         keyboard: true,
         parallax: true
      });

//      $(".panorama").perfectScrollbar();

      $('#pivot').pivot();

   </script>


</body></html>